
<template>
  <el-row :gutter="20">
    <el-col :span="9">
      <el-card shadow="hover">
        <el-tabs v-model="activeAlgorithm" class="algorithmInput">
          <el-tab-pane label="蚁群算法" name="first">
            <el-upload class="upload-demo" ref="upload1" accept=".txt" :action="action1()" :on-change="handleChange" :on-success="handleSuccess" :file-list="fileList" :auto-upload="false">
              <template #trigger>
                <el-button size="small" type="primary">选取文件</el-button>
              </template>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload1">
                <span v-if="!loading1">蚁群算法计算</span>
                <span v-else>计算中...</span>
              </el-button>
              <template #tip>
                <div class="el-upload__tip">
                  只能上传 txt 文件，且不超过 500kb
                </div>
              </template>
            </el-upload>
          </el-tab-pane>
          <el-tab-pane label="模拟退火算法" name="second">
            <el-upload class="upload-demo" ref="upload2" accept=".txt" :action="action2()" :on-change="handleChange" :on-success="handleSuccess" :file-list="fileList" :auto-upload="false">
              <template #trigger>
                <el-button size="small" type="primary">选取文件</el-button>
              </template>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload2">
                <span v-if="!loading2">模拟退火算法计算</span>
                <span v-else>计算中...</span>
              </el-button>
              <template #tip>
                <div class="el-upload__tip">
                  只能上传 txt 文件，且不超过 500kb
                </div>
              </template>
            </el-upload>
          </el-tab-pane>
          <el-tab-pane label="遗传算法" name="third">
            <el-upload class="upload-demo" ref="upload3" accept=".txt" :action="action3()" :on-change="handleChange" :on-success="handleSuccess" :file-list="fileList" :auto-upload="false">
              <template #trigger>
                <el-button size="small" type="primary">选取文件</el-button>
              </template>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload3">
                <span v-if="!loading3">遗传算法计算</span>
                <span v-else>计算中...</span>
              </el-button>
              <template #tip>
                <div class="el-upload__tip">
                  只能上传 txt 文件，且不超过 500kb
                </div>
              </template>
            </el-upload>
          </el-tab-pane>
          <el-tab-pane label="禁忌搜索算法" name="fourth">
            <el-upload class="upload-demo" ref="upload4" accept=".txt" :action="action4()" :on-change="handleChange" :on-success="handleSuccess" :file-list="fileList" :auto-upload="false">
              <template #trigger>
                <el-button size="small" type="primary">选取文件</el-button>
              </template>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload4">
                <span v-if="!loading4">禁忌搜索算法计算</span>
                <span v-else>计算中...</span>
              </el-button>
              <template #tip>
                <div class="el-upload__tip">
                  只能上传 txt 文件，且不超过 500kb
                </div>
              </template>
            </el-upload>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
    <el-col :span="15">
      <el-card shadow="hover" class="result-card">
        <div class="result-total">
          <el-tag>城市数: {{totalCity}}</el-tag>
          <el-tag>总距离: {{totalDistance}}</el-tag>
        </div>
        <el-tabs v-model="activeResult" type="card">
          <el-tab-pane label="表格展示" name="first">
            <el-table :data="tableData" border max-height="400">
              <el-table-column prop="number" label="城市编号" width="90">
              </el-table-column>
              <el-table-column prop="address" label="地址" width="450">
              </el-table-column>
              <el-table-column prop="distance" label="与下个城市之间的距离">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="图展示" name="second">
            <canvas id="canvas" width="620" height="400"></canvas>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
var ctx;

import { ElMessage } from "element-plus";

export default {
  data() {
    return {
      activeAlgorithm: "first",
      activeResult: "first",
      fileList: [],
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      totalCity: 0,
      totalDistance: 0,
      tableData: [],
      nodes: [],
    };
  },
  methods: {
    submitUpload1: function () {
      if (this.fileList.length == 0) {
        this.alertMessage("请选择文件", "warning");
      } else {
        this.loading1 = true;
        this.$refs.upload1.submit();
      }
    },
    action1: function () {
      return process.env.VUE_APP_BASE_API + "/file/algorithm/aco";
    },
    submitUpload2: function () {
      if (this.fileList.length == 0) {
        this.alertMessage("请选择文件", "warning");
      } else {
        this.loading2 = true;
        this.$refs.upload2.submit();
      }
    },
    action2: function () {
      return process.env.VUE_APP_BASE_API + "/file/algorithm/sa";
    },
    submitUpload3: function () {
      if (this.fileList.length == 0) {
        this.alertMessage("请选择文件", "warning");
      } else {
        this.loading3 = true;
        this.$refs.upload3.submit();
      }
    },
    action3: function () {
      return process.env.VUE_APP_BASE_API + "/file/algorithm/ga";
    },
    submitUpload4: function () {
      if (this.fileList.length == 0) {
        this.alertMessage("请选择文件", "warning");
      } else {
        this.loading4 = true;
        this.$refs.upload4.submit();
      }
    },
    action4: function () {
      return process.env.VUE_APP_BASE_API + "/file/algorithm/tabu";
    },
    handleChange: function (file, fileList) {
      this.fileList = fileList.slice(-1);
      this.fileList[this.fileList.length - 1].status = "ready";
    },
    handleSuccess: function (res) {
      this.loading1 = false;
      this.loading2 = false;
      this.loading3 = false;
      this.loading4 = false;
      this.alertMessage("计算完毕", "success");
      this.tableData = res.data;
      this.totalCity = res.data[0].totalCity;
      this.totalDistance = res.data[0].totalDistance;
      this.drawGraph();
    },
    drawGraph: function () {
      this.computePoint();
      this.drawPoint();
      this.connect();
    },
    computePoint: function () {
      for (var i = 0; i < this.tableData.length; i++) {
        this.nodes[i] = this.tableData[i].node;
        this.nodes[i].x = this.nodes[i].x / 16;
        this.nodes[i].y = this.nodes[i].y / 16;
      }
    },
    drawPoint: function () {
      var canvas = document.getElementById("canvas");
      ctx = canvas.getContext("2d");
      ctx.clearRect(0, 0, 620, 400);
      for (var i = 0; i < this.nodes.length; i++) {
        ctx.beginPath();
        if (0 === i) {
          ctx.strokeStyle = "#FF0000";
          ctx.fillStyle = "#FF0000";
          ctx.font = "15px Arial";
          ctx.fillText("起点", this.nodes[i].x, this.nodes[i].y);
          ctx.arc(this.nodes[i].x, this.nodes[i].y, 3, 0, 2 * Math.PI);
          ctx.fill();
          ctx.stroke();
        } else {
          ctx.strokeStyle = "#000000";
          ctx.fillStyle = "#000000";
          ctx.font = "15px Arial";
          ctx.fillText("N" + i, this.nodes[i].x, this.nodes[i].y);
          ctx.arc(this.nodes[i].x, this.nodes[i].y, 3, 0, 2 * Math.PI);
          ctx.fill();
          ctx.stroke();
        }
      }
    },
    connect: function () {
      for (var i = 1; i < this.tableData.length; i++) {
        ctx.beginPath();
        var r1 = Math.floor(Math.random() * 255);
        var r2 = Math.floor(Math.random() * 255);
        var r3 = Math.floor(Math.random() * 255);
        ctx.strokeStyle = "rgba(" + r1 + "," + r2 + "," + r3 + ")"; //线颜色
        var x1 = this.nodes[this.tableData[i - 1].number].x;
        var y1 = this.nodes[this.tableData[i - 1].number].y;
        ctx.moveTo(x1, y1); //移动到起始点位置
        var x2 = this.nodes[this.tableData[i].number].x;
        var y2 = this.nodes[this.tableData[i].number].y;
        ctx.lineTo(x2, y2); //移动到停止位置
        ctx.stroke();
      }
    },
    alertMessage: function (msg, type) {
      ElMessage({
        message: msg,
        type: type,
      });
    },
  },
};
</script>

<style>
.result-card {
  height: 500px;
}
.result-total {
  float: right;
}
.algorithmInput {
  height: 150px;
}
#canvas {
  width: 620px;
  height: 400px;
  border: greenyellow solid 1px;
}
</style>
